<template>
  <div class="fillContain">
    <div>
      <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button v-if="user.identity == 'manager'" type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table border :data="tableData" max-height="450">
        <el-table-column label="标题图片" align="center" prop="img">
          <template slot-scope="scope">
            <img :src="scope.row.img" style="width:50px;" />
          </template>
        </el-table-column>
        <el-table-column label="标题" align="center" prop="title"></el-table-column>
        <el-table-column label="内容" align="center" prop="content">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="user.identity == 'manager'"
          align="center"
          label="操作"
          fixed="right"
          width="320"
        >
          <template slot-scope="scope">
            <el-button type="warning" size="samll" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="samll" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row>
      <el-col :span="24">
        <div class="paginations">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @prev-click="handlePre"
            @next-click="handleNext"
            :current-page="currentPage"
            :page-size="10"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!--弹框-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <div class="label">标题图片:</div>
      <img style="width:100px;height:100px;" :src="formData.img" />
      <label for="upload" class="ui-upload">upload</label>
      <input accept="image/*" ref="file" @change="previewPhoto" type="file" id="upload" style="display: none;" />

      <div class="label">标题:</div>
      <el-input v-model="formData.title"></el-input>
      <div class="label">内容:</div>
      <editor :editorContent="formData"></editor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import { reqAquaticAdd, reqAquatic, reqAquaticDelete,reqAquaticEdit } from "../../api";
import { formDate } from "../../utils/Date.js";
export default {
  components: {
    editor: () => import("@/components/editor")
  },
  data() {
    return {
      dialogVisible: false,
      edit:false,//根据该值来判断是添加还是编辑请求
      editIndex:0,//编辑的数据下标
      user: JSON.parse(localStorage.getItem("token_data")),
      tableData: [],
      formData: {
        content: "哈哈哈",
        title: "",
        img: require("../../assets/noPhoto.jpg")
      },
      currentPage: 1,
      total: 1
    };
  },
  created() {
    this.getAquatic(1);
  },
  mounted() {},
  methods: {
    //预览图片
    previewPhoto() {
      var file = this.$refs.file.files[0];
      var fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        this.formData.img = fileReader.result;
      };
    },
    //关闭弹框前提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleEdit(index, row) {
      this.edit = true;
      this.editIndex = index;
      this.dialogVisible = true;
      this.formData = row;
    },
    handleDelete(index, row) {
      reqAquaticDelete({ id: row._id })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.tableData.splice(index,1)
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "删除失败",
            type: "error"
          });
        });
    },
    add() {
      this.edit = false;
      this.dialogVisible = true;
      this.formData = {
        content:'',
        title:'',
        img:require("../../assets/noPhoto.jpg")
      }
    },
    //点击上一页触发
    handlePre(page) {
      this.getAquatic(page);
    },
    //点击下一页触发
    handleNext() {
      this.getAquatic(page);
    },
    //点击页码触发
    handleCurrentChange(page) {
      this.getAquatic(page);
    },
    //获取新闻消息
    getAquatic(page) {
      reqAquatic({ page })
        .then(res => {
          this.tableData = res.data;
          this.total = res.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //增加弹出框的确定按钮
    submitBtn() {
      this.$eventBus.$emit("submit");
      if(this.edit){
         reqAquaticEdit(this.formData)
        .then(res => {
          this.dialogVisible = false;
          this.tableData[this.editIndex]=this.formData;
          this.$message({
            message: "编辑成功",
            type: "success"
          });
          
        })
        .catch(err => {
          console.log(err),
            this.$message({
              message: "编辑失败",
              type: "error"
            });
        });
        return;
      }
      reqAquaticAdd(this.formData)
        .then(res => {
          this.dialogVisible = false;
          this.$message({
            message: "添加成功",
            type: "success"
          });
          window.location.reload();
        })
        .catch(err => {
          console.log(err),
            this.$message({
              message: "添加失败",
              type: "error"
            });
        });
    }
  }
};
</script>

<style scoped >
.fillContain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.paginations {
  text-align: right;
  margin-top: 10px;
}
.label {
  font-size: 15px;
  padding: 10px 0;
}
.ui-upload {
  height: 30px;
  width: 80px;
  background-color: #00abff;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  margin-left: 20px;
  position: relative;
  bottom: 10px;
}
 ::v-deep .el-table .cell{
   max-height:60px;
 }
 
</style>
